<script setup lang="ts">
import { ref } from 'vue'
import MyTable from './components/04.插槽/MyTable.vue'

// 项目中 开启了 ESLint 校验语法，
// types 就是一个类型文件，为了和其他的导入区分，需要加一个 type 前缀
import { type Person } from './types/types'

const list = ref<Person[]>([
  { id: 1, name: '张小花', age: 18 },
  { id: 2, name: '孙大明', age: 19 },
  { id: 3, name: '刘德忠', age: 17 }
])

const list2 = ref<Person[]>([
  { id: 1, name: '赵小云', age: 18 },
  { id: 2, name: '刘蓓蓓', age: 19 },
  { id: 3, name: '姜肖泰', age: 17 }
])

const delItem = (id: number) => {
  console.log(id)
  list.value = list.value.filter((item) => item.id != id)
}
</script>

<template>
  <!-- MyTable 知道如何渲染数据，但是数据要由父组件提供 -->
  <MyTable :data="list">
    <!-- 子组件中有部分无法确定的 UI 结构，需要外部传递进来，slot -->
    <template #default="obj">
      <button @click="delItem(obj.id)">删除</button>
    </template>
  </MyTable>
  <MyTable :data="list2">
    <template #default="data">
      <button @click="console.log(data.item.name + '|' + data.item.age)">查看</button>
    </template>
  </MyTable>
</template>

<style scoped>
body {
  background-color: #b3b3b3;
}
button {
  width: 65px;
  height: 35px;
  font-size: 18px;
  border: 1px solid #ccc;
  outline: none;
  border-radius: 3px;
  cursor: pointer;
  background-color: #ffffff;
  margin-left: 5px;
}
</style>
